<template>
  <div>
    <child-nav-bar :title="'学习成果转换'"></child-nav-bar>
    <!-- 列表数据 -->
    <van-collapse v-model="activeNames">
      <van-collapse-item v-for="(item, index) in  listData" :key="item.id">
        <template #title>
          <span>{{ item.s_number === undefined ? '' : '学号：' + item.s_number }}；</span>
          <span>申请状态：</span>
          <span v-if="item.outcome == 0" style="color: rgba(255, 0, 0, 0.539);">未通过</span>
          <span v-else-if="item.outcome == 1">审批中</span>
          <span v-else-if="item.outcome == 2" style="color: rgba(0, 128, 0, 0.62);">通过</span>
        </template>
        <template>
          <van-list>
            <van-cell :title="'序号：' + (index + 1)" />
            <van-cell>
              <template #title> {{ item.s_number === undefined ? '' : '学号：' + item.s_number }} </template>
            </van-cell>
            <van-cell>
              <template #title> {{ item.describe === undefined ? '' : '描述：' + item.describe }} </template>
            </van-cell>
            <van-cell>
              <template #title> {{ item.subTime === undefined ? '' : '提交日期：' + item.subTime }} </template>
            </van-cell>
            <van-cell>
              <template #title> <span>申请状态：</span>
                <span v-if="item.outcome == 0" style="color: rgba(255, 0, 0, 0.539);">未通过</span>
                <span v-else-if="item.outcome == 1">审批中</span>
                <span v-else-if="item.outcome == 2" style="color: rgba(0, 128, 0, 0.62);">通过</span>
              </template>
            </van-cell>
            <!-- 修改结构 -->
            <van-cell v-if="item.outcome != 2">
              <template #title> 修改：<button class="modify-buttons" @click="modify(item)">修改信息</button></template>
            </van-cell>
          </van-list>
        </template>
      </van-collapse-item>
    </van-collapse>
    <!-- 添加 转换按钮 -->
    <van-goods-action>
      <van-goods-action-button type="info" text="添加" color="#be99ff" @click="onClickButton" />
    </van-goods-action>
    <!-- 弹出层 -->
    <van-action-sheet v-model="show" :title="formTitle">
      <!-- 添加表单内容 -->
      <div class="content">
        <van-form @submit="onSubmit">
          <!-- 学号 -->
          <van-field v-model="form.s_number" name="s_number" label="学号" placeholder="用户名" disabled />
          <!-- 学习成果积分 -->
          <van-field name="picker" v-model="form.scores" label="学习成果积分" disabled />
          <!-- 申请理由 -->
          <van-field v-model="form.describe" name="describe" label="申请理由" placeholder="请填写申请理由"
            :rules="[{ required: true, message: '请填写申请理由' }]" />
          <!-- 提价按钮 -->
          <div style="margin: 18px;">
            <van-button round block type="info" native-type="submit">提交</van-button>
          </div>
        </van-form>
      </div>
    </van-action-sheet>
  </div>
</template>
<script>
import { convert, postAchievement, modify } from '@/api/student/achievementAPI'

export default {
  data() {
    return {
      activeNames: ['1'], //activeNames 为数组格式
      listData: [], // 成果转换表数据
      show: false, // 弹出层（添加）
      formTitle: '',
      //申请参数
      form: {
        id: '',
        scores: '', //学习成果积分
        describe: '', //申请理由
        outcome: 1, // 初始审核中
        s_number: '', // 学号
        status: 1, // 转换 状态
        subTime: ''// 提交时间
      }
    }
  },
  computed: {
    // 个人信息
    user() {
      return this.$store.getters.info
    }
  },
  created() {
    this.getconvertData();
  },
  methods: {
    // 获取 成果转换信息
    async getconvertData() {
      const { data } = await convert(this.user.username)
      this.listData = data
      this.form.s_number = this.user.username
      this.form.scores = this.user.scores

    },

    // 添加按钮
    onClickButton() {
      this.show = true
      this.formTitle = "成果转换添加"
      this.removeFormData();
    },
    // 表单提交
    async onSubmit() {
      // 给 申请表单中的 日期 添加当前日期
      const currentDate = new Date();
      const year = currentDate.getFullYear();
      const month = String(currentDate.getMonth() + 1).padStart(2, '0');
      const day = String(currentDate.getDate()).padStart(2, '0');
      this.form.subTime = `${year}-${month}-${day}`;
      console.log("form表单欲提交", this.form)


      if (this.form.id) {  // 修改
        const res = await modify(this.form)
        this.$toast(res.message); // 消息提示
        this.removeFormData()

      } else { // 添加
        const res = await postAchievement(this.form)
        this.removeFormData()
        this.$toast(res.message); // 消息提示
      }

      this.show = false

      // 重新调取方法
      setTimeout(() => {
        this.getconvertData();
      }, 100)
    },

    // 修改
    modify(item) {
      // 打开 弹出
      this.formTitle = "成果转换修改"
      this.show = true

      // 表单初始值
      this.form.describe = item.describe
      this.form.id = item.id
      console.log(item);
    },

    // 消除 表单数据
    removeFormData() {
      // 清除数据
      this.form.describe = ''
      this.form.id = ''
    }

  }
}
</script>
<style lang="less" scoped>
// 弹出层 样式
.content {
  padding: 16px 16px 160px;
}

// 修改数据按钮样式
.modify-buttons {
  outline: none;
  border: none;
  border-radius: 10px;
  background-color: #07c160;
  color: #ffffff;
}
</style>